<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>用户管理</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel="stylesheet" type="text/css" media="screen" href="${pageContext.request.contextPath}/css/userControl.css">
    <link rel="stylesheet" type="text/css" media="screen" href="${pageContext.request.contextPath}/css/normalize.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font/iconfont.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/TypeManagement.css">
</head>

<body>
<div class="max">
    <div class="_left">
        <iframe id="type" name="header_iframe" width=250px height="930px"
                src="components/NavigationBar.jsp" frameborder=0 scrolling="no"></iframe>
    </div>
    <div class="catalog" style="left: 270px;">当前位置：<a href="#">/ 用户管理 /</a></div>
    <!-- 主体 -->
    <div class="_right_top">
        <div style="margin-left: 0;">
            <iframe name="header_iframe" height="160px" width=100% src="components/Header.jsp" frameborder=0
                    scrolling="no"></iframe>
        </div>
        <div class="_right_top_item">
            <h2>用户名称</h2>
            <form action="${pageContext.request.contextPath}/AdminServlet" method="post">
                <input name="adminName" type="text" placeholder="请输入用户名">
                <button class="_right_top_item_btn01 iconfont icon-sousuo">搜索</button>
            </form>
        </div>

        <div class="buttons">
            <button class=" buttons_btn1"><span class="iconfont icon-tianjia"></span>新增</button>
        </div>
        <div class="right">
            <div class="info">
                <table>
                    <tr>
                        <th>用户编号</th>
                        <th>用户名称</th>
                        <th>用户密码</th>
                        <th>手机号码</th>
                        <th>邮箱</th>
                        <th>操作</th>
                    </tr>
                    <c:forEach items="${admins}" var="admin">
                        <tr>
                            <td class="admin">${admin.adminId}</td>
                            <td class="admin">${admin.adminName}</td>
                            <td class="admin">${admin.adminPassword}</td>
                            <td class="admin">${admin.phone}</td>
                            <td class="admin">${admin.email}</td>
                            <td>
                                <button class="updateInfo" onclick="update(this)" value="${admin}">修改</button>
                                <span style="font-size: 20px;">|</span>
                                <button class="delInfo"><a
                                        href="${pageContext.request.contextPath}/AdminServlet?m=deleteById&adminId=${admin.adminId}"
                                        onclick="return window.confirm('你确定要删除吗？')">删除</a>
                                </button>
                            </td>
                        </tr>
                    </c:forEach>
                </table>
            </div>
        </div>
        <div class="overlay">
            <div class="update">
                <div class="head_box">
                    <span>修改信息</span>
                </div>
                <div class="body_box" id="updateAdmin">
                    <form action="${pageContext.request.contextPath}/AdminServlet?m=updateById" method="post">
                        <table>
                            <tr>
                                <td>
                                    <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span>用户id:
                                    </div>
                                </td>
                                <td>
                                    <div><input class="updateAdmin" type="text" name="adminId" readonly="readonly">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span>用户名称:
                                    </div>
                                </td>
                                <td>
                                    <div><input class="updateAdmin" type="text" name="adminName"
                                                placeholder="请输入用户名称"></div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span> 密码：
                                    </div>
                                </td>
                                <td>
                                    <div><label><input class="updateAdmin" type="text" name="adminPassword"
                                                       placeholder="请输入密码"></label>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span> 用户权限：
                                    </div>
                                </td>
                                <td>
                                    <div><label><input class="updateAdmin" type="text" name="adminRole"
                                                       placeholder="用户权限"></label>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span> 手机号码：
                                    </div>
                                </td>
                                <td>
                                    <div><label><input class="updateAdmin" type="text" name="phone"
                                                       placeholder="请输入电话号码"></label>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span> 邮箱：
                                    </div>
                                </td>
                                <td>
                                    <div><label><input class="updateAdmin" type="text" name="email"
                                                       placeholder="请输入邮箱"></label>
                                    </div>
                                </td>
                            </tr>
                        </table>
                        <div class="footer_box">
                            <input type="button" class="cancel" value="取消"></input>
                            <input type="submit" class="confirm" value="确定"></input>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="add">
            <div class="update">
                <div class="head_box">
                    <span>添加信息</span>
                </div>
                <div class="body_box">

                    <form action="AdminServlet?m=add" method="post">
                        <table>
                            <tr>
                                <td>
                                    <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span>用户名称:
                                    </div>
                                </td>
                                <td>
                                    <div><input type="text" name="adminName" id="" placeholder="请输入用户名称"></div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span> 密码：
                                    </div>
                                </td>
                                <td>
                                    <div><label><input type="password" name="adminPassword"
                                                       placeholder="请输入密码"></label>
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td>
                                    <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span> 手机号码：
                                    </div>
                                </td>
                                <td>
                                    <div><label><input type="text" name="phone" placeholder="请输入电话号码"></label>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span> 邮箱：
                                    </div>
                                </td>
                                <td>
                                    <div><label><input type="text" name="email" placeholder="请输入邮箱"></label>
                                    </div>
                                </td>
                            </tr>
                        </table>
                        <div class="footer_box">
                            <input type="button" class="cancel01" value="取消"></input>
                            <input type="submit" class="confirm" value="确定"></input>
                        </div>
                    </form>

                </div>
            </div>
        </div>
</body>

<script>
    let updateInfo = document.querySelectorAll('.updateInfo')
    let overlay = document.querySelector('.overlay')
    let cancel01 = document.querySelector('.cancel01')
    let add1 = document.querySelector('.add')
    let cancel = document.querySelector('.footer_box').getElementsByTagName('input')[0]
    let add = document.querySelector('.buttons').getElementsByTagName('button')[0]

    let iFrame = document.querySelector('#type')

    iFrame.onload = function () {
        iFrame.contentWindow.postMessage(window.location.pathname.substr(window.location.pathname.lastIndexOf('/')), '*');
    }

    updateInfo.forEach((item, index) => {
        item.addEventListener('click', (e) => {
            overlay.style.display = 'block'
            e.stopPropagation()
        })
    })
    cancel.onclick = function (e) {
        overlay.style.display = "none";
        add1.style.display = "none"
    }
    cancel01.onclick = function (e) {
        overlay.style.display = "none";
        add1.style.display = "none"
    }

    add.addEventListener('click', (e) => {
        add1.style.display = 'block'
        e.stopPropagation()
    })

    function update(value) {
        const admin = value.value.substring(5).replace(/'/g, "").replace(/{/g, "").replace(/}/g, "");
        let matchList = admin.match(/=([^,]*)/g);
        let dataList = matchList.map(match => match.substring(1))
        const input = document.getElementsByClassName('updateAdmin');
        for (let i = 0; i < dataList.length; i++) {
            input[i].value = dataList[i]
        }
    }
</script>

</html>